<template>
  <div>
    <div class="dialog-header">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(img,index) in detail.urls" :key="index">
          <img-box :imgSrc="img" width="590" height="400"></img-box>
        </el-carousel-item>
      </el-carousel>
      <div class="dialog-header-content xui-margin-top-lg xui-padding-bottom-xl">
        <!-- <div class="title">
          <span>【审核状态】</span>
          <p class="xui-text-truncate" :class="{'color-red':detail.state == 2, 'color-green':detail.state == 1}" style="font-size:15px">{{status}}</p>
          <p v-if="remark && $route.name == 'userCenter-myExhibition'" class="xui-text-truncate" style="margin-left:100px; color:#888; font-size:12px;background:#f7f7f7;padding:0 10px">审核意见：{{remark}}</p>
        </div> -->
        <div class="title">
          <span>【作品名称】</span>
          <p class="xui-text-truncate">{{detail.title}}</p>
        </div>
        <div class="info">
          <span>【作品简介】</span>
          <p class="bodyFont" ref="bodyFont" :class="{bodyHeight:isActive}">
            {{detail.content}}
          </p>
        </div>
        <div class="all-text" @click="contentToggle()">
          <span>{{btnText}}</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
        <div class="icon">
          <span v-if="detail.isAgree == 'Y'" class="color-primary">
            <i class="iconfont icon-dianzan-fill"></i> 已赞</span>
          <span v-else class="color-gray" @click="agree" style="cursor:pointer">
            <i class="iconfont icon-dianzan"></i> 点赞</span>
          <!-- <span class="color-gray xui-margin-right-md"> <i class="iconfont icon-fenxiang"></i> 分享</span> -->
        </div>
      </div>

    </div>
    <div class="dialog-comment xui-padding-sm">
      <el-form ref="commentForm" :model="form" class="form-comment" :rules="form.rules">
        <el-form-item class="input-comment" label="评论填写" prop="comment">
          <el-input type="textarea" v-model="form.comment" placeholder="说点什么..."></el-input>
        </el-form-item>

        <div class="btn-comment">
          <el-button plain @click="submitMyComment('commentForm')">评论</el-button>
        </div>
      </el-form>

      <div class="comment-content xui-margin-top-sm">
        <h4>全部评论</h4>
        <ul class="xui-margin-bottom-sm">
          <li v-for="(item,index) in comments" :key="index" class="xui-padding-vertical-sm">
            <!-- <div class="avatar">
              <img :src="item.avatar"/>
            </div> -->
            <div class="follow">
              <!-- <span class="xui-fr color-gray"> <i class="iconfont icon-dianzan"></i> 5</span> -->
              <!-- <span class="xui-fr color-gray xui-margin-right-md"> <i class="iconfont icon-BAI-pinglun"></i> 2</span> -->
            </div>
            <div>
              <span class="name">
                {{item.mname || '网友评论'}}
              </span>
              <span class="time">
                {{item.stAct | formatTime}}
              </span>
            </div>
            <p>
              {{item.content}}
            </p>
          </li>
        </ul>
        <div class="all-text">
          <span>显示全部</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import imgBox from "@/components/widge/img-box";
  import {
    likeArt,
    getArtCommentList,
    postArtComment,
    getArtDetail
  } from "@/api/specExhib";
  import {
    addBrowseNum
  } from "@/api/detail";
  import {
    formatTime,
    parseTime
  } from "@/utils";

  export default {
    components: {
      imgBox
    },
    props: ["detail"],
    data() {
      return {
        form: {
          comment: "",
          rules: {
            comment: [{
              required: true,
              message: "长度在3到200个字之间",
              min: 3,
              max: 200
            }]
          }
        },
        isActive: false,
        curHeight: 0,
        bodyHeight: 999999999999,
        btnText: "展开全文",
        comments: [],
        myComment: "",
        remark: ""
      };
    },
    computed: {
      status() {
        let result = "";
        switch (this.detail.state) {
          case 0:
            result = "待审核";
            break;
          case 1:
            result = "审核通过";
            break;
          case 2:
            result = "审核不通过";
            break;
        }
        return result;
      },
      userID() {
        return this.$store.getters.userId;
      }
    },
    methods: {
      test() {
        console.log("test");
      },
      contentToggle() {
        this.curHeight = this.$refs.bodyFont.offsetHeight;
        if (this.curHeight < this.bodyHeight) {
          this.isActive = !this.isActive;
          this.btnText = this.isActive === true ? "收起" : "展开全文";
        } else {
          this.btnText = "展开全文";
        }
        console.log(this.contentStatus);
      },
      agree() {
        let userId = this.$store.getters.userId;
        likeArt(this.detail.id, userId).then(res => {
          if (res.msg == "添加成功") {
            this.$message({
              showClose: true,
              type: "success",
              msg: "点赞成功"
            });
          }
          this.detail.isAgree = "Y";
        });
      },
      getComment() {
        getArtCommentList(this.detail.id).then(res => {
          this.comments = res.data.recordsList;
        });
      },
      postMyComment(id, comment) {
        let userId = this.$store.getters.userId;
        postArtComment(id, userId, comment).then(res => {
          this.$message({
            showClose: true,
            type: "success",
            massage: "发布成功"
          });
        });
      },
      submitMyComment(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let userId = this.$store.getters.userId;
            postArtComment(this.detail.id, userId, this.form.comment).then(
              res => {
                this.$message({
                  showClose: true,
                  message: "发布成功，审核通过后显示该评论",
                  type: "success"
                });
                this.$refs[formName].resetFields();
              }
            );
          } else {
            this.$message({
              showClose: true,
              message: "评论内容需要在3～200个字符之间",
              type: "error"
            });
          }
        });
      },
      addBrowseNum() {
        addBrowseNum(this.detail.id, 5);
      },
      getRemark() {
        this.remark = "";
        getArtDetail(this.detail.id, this.userID).then(res => {
          let str = res.data.remark;
          let index = str.indexOf(":");
          if (index == -1) {
            return false;
          }
          this.remark = str.slice(index + 1).trim();
        });
      }
    },
    mounted() {
      this.getComment();
      this.addBrowseNum();
      this.getRemark();
    },
    watch: {
      detail: function () {
        this.getComment();
        this.getRemark();
      }
    },
    filters: {
      formatTime: function (value) {
        if (!value) return "";
        return value.split(" ")[0];
      }
    }
  };

</script>

<style lang="less" scoped>
  .bodyHeight {
    height: auto !important;
  }

  .bodyFont {
    height: 68px;
    overflow: hidden;
    max-height: 100%;
  }

  .dialog-header {
    border-bottom: 1px solid #eeeeee;
    .dialog-header-content {
      position: relative;
      .title span,
      .info span {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #b2914f;
        vertical-align: top;
      }
      p {
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        color: #000;
        width: 80%;
        vertical-align: top;
      }
      .all-text {
        float: right;
        cursor: pointer;
        span {
          font-size: 14px;
          color: #bebebe;
        }
        i {
          color: #c0c0c0;
        }
      }
      .icon {
        position: absolute;
        right: 0;
        top: 0;
        span {
          font-size: 14px;
        }
      }
    }
  }

  .dialog-comment {
    .all-text {
      width: 75px;
      margin: auto;
    }
  }

  .form-comment {
    position: relative;
    .input-comment {
      input {
        width: calc(~"100% - 50px;");
      }
    }
    .btn-comment {
      // position: absolute;
      // right: 5px;
      // top: 45px;
      text-align: right;
      .el-button {
        border: 1px solid #dbad23;
        color: #dbad23;
        padding: 7px 20px;
      }
      .el-button:hover {
        background: #dbad23;
        color: #fff;
      }
    }
  }

  .comment-content {
    h4 {
      font-size: 16px;
      margin-bottom: 0;
    }
    li {
      border-bottom: 1px solid #f5f5f5;
    }
    .avatar {
      float: left;
      width: 52px;
      height: 52px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        border-radius: 50%;
      }
    }
    .follow {
      float: right;
      margin-top: 5px;
      padding: 0;
      font-size: 13px;
    }
    .name {
      padding-top: 4px;
      font-size: 14px;
      display: inline-block;
      color: #444444;
      font-weight: bold;
      vertical-align: middle;
    }
    .time {
      display: inline-block;
      padding: 4px 0 0 3px;
      font-size: 12px;
      color: #969696;
      vertical-align: middle;
    }
    p {
      margin-top: 2px;
      font-size: 12px;
      color: #444444;
    }
    .all-text {
      span {
        font-size: 14px;
        color: #dbad23;
      }
      i {
        color: #bf9c51;
      }
    }
  }

</style>
